<template>
  <div class="cash-filter-container">
    <el-form
      :inline="true"
      :model="filterData"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="4"
          :xs="3"
          style="max-width:25%;padding-left: 0px"
        >
          <el-form-item
            label="状态"
            style="width: 100%"
          >
            <el-select
              v-model="filterData.receiveMoneySplitStatus"
              style="width: 100%"
              placeholder="全部"
              clearable
              @change="refreshList"
            >
              <el-option
                label="全部"
                :value="''"
              />
              <el-option
                v-for="(item,index) in marginStatusOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :lg="4"
          :xs="3"
          style="max-width:25%;padding-left: 0px"
        >
          <el-form-item
            label="保证金类型"
            style="width: 100%"
          >
            <el-select
              v-model="filterData.splitType"
              style="width: 100%"
              placeholder="全部"
              clearable
              @change="refreshList"
            >
              <el-option
                v-for="(item,index) in cashDepositTypeOption.filter(p => p.value!=='goods_payment')"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :lg="4"
          :xs="3"
          style="max-width:25%"
        >
          <el-form-item
            label="代理类型"
            style="width: 100%"
          >
            <el-select
              v-model="filterData.agentType"
              style="width: 100%"
              placeholder="全部"
              clearable
              @change="refreshList"
            >
              <el-option
                v-for="(item,index) in agentTypeOption.filter(p => p.value !=='direct')"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :lg="4"
          :xs="3"
          style="max-width:25%"
        >
          <el-form-item
            label="代理名称"
            style="width: 100%"
          >
            <el-select
              v-model="filterData.returnCustomerId"
              style="width: 100%"
              placeholder="输入选择代理名称"
              filterable
              remote
              clearable
              reserve-keyword
              :remote-method="returnCustomerQuerySearch"
              :loading="returnCustomerLoading"
              @change="refreshList"
              @clear="()=>filterData.returnCustomerId=undefined"
            >
              <el-option
                v-for="(item, idx) in returnCustomerOption"
                :key="item.id"
                :label="item.returnCustomerName"
                :value="item.returnCustomerId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :xs="4"
          :lg="5"
          style="max-width: 50%"
        >
          <el-form-item
            label="金额"
            style="width:100%"
          >
            <div style="display:flex;">
              <el-input
                v-model="filterData.minAmount"
                placeholder="最小金额"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                @blur="()=>filterData.minAmount = filterData.minAmount?Number(filterData.minAmount):undefined"
              />
              <span style="padding: 0px 4px;color: #666">-</span>
              <el-input
                v-model="filterData.maxAmount"
                placeholder="最大金额"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                @blur="()=>filterData.maxAmount = filterData.maxAmount?Number(filterData.maxAmount):undefined"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col
          :xs="3"
          :lg="3"
        >
          <el-form-item style="min-width: 130px">
            <el-button
              class="border-btn"
              @click="resetFilter"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="refreshList"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="listData"
    border
    :cell-style="cellStyle"
    @row-click="rowClick"
  >
    <el-table-column
      prop="splitNumber"
      label="款项明细编号"
      fixed="left"
      :min-width="140"
      show-overflow-tooltip
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="splitType"
      label="保证金类型"
      header-align="center"
      :min-width="140"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span> {{ getLabel('payee_type', scope.row.splitType) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :width="120"
      show-overflow-tooltip
      prop="splitAmount"
      label="保证金（元）"
      header-align="center"
      align="right"
    >
      <template #default="scope">
        <span>{{ moneyFormat(scope.row.splitAmount) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="customerName"
      label="代理名称"
      header-align="center"
      :min-width="200"
      show-overflow-tooltip
    />
    <!--
    <el-table-column
      prop="agentType"
      label="付款方类型"
      header-align="center"
      align="center"
      :min-width="140"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span> {{ getLabel('agent_type',scope.row.agentType) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :min-width="120"
      show-overflow-tooltip
      prop="paymentBank"
      label="付款开户行"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.paymentBank||'无' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :min-width="160"
      show-overflow-tooltip
      prop="paymentAccount"
      label="付款账号"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.paymentAccount||'无' }}</span>
      </template>
    </el-table-column>
    -->
    <el-table-column
      label="付款日期"
      :width="150"
      show-overflow-tooltip
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <span> {{ dateFormat("yyyy-mm-dd",scope.row.payTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="负责营销职员"
      :width="150"
      show-overflow-tooltip
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.headName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="分账时间"
      :width="150"
      show-overflow-tooltip
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <span> {{ dateFormat("yyyy-mm-dd HH:MM",scope.row.splitTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="财务处理人"
      :width="150"
      show-overflow-tooltip
      header-align="center"
      align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.dealName || '无' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <div>
          <span>{{ getLabel('cash_deposit_status', scope.row.receiveMoneySplitStatus) }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      v-if="isOperation"
      label="操作"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <!-- v-if="scope.row.receiveMoneySplitStatus==='1'" -->
        <el-button
          v-if="scope.row.receiveMoneySplitStatus==='1'"
          type="text"
          @click="dealCashDeposit(scope.row)"
        >处置</el-button>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="filterData.page"
    v-model:limit="filterData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getList"
  />
  <deal-cash-deposit
    ref="dealCashDepositRef"
    @dealSuccess="getList"
  />
  <!-- 收款详情 -->
  <detail-drawer
    ref="detailDrawer"
    custom-title
  >
    <template #title>
      <span style="margin-right:5px;">保证金详情 - {{ rowData?.splitNumber }}</span>
      <el-tag
        type="warning"
        size="small"
      >
        <span>
          {{ getLabel('cash_deposit_status',rowData?.receiveMoneySplitStatus) }}
        </span>
      </el-tag>
    </template>
    <template #contents>
      <div class="drawer-content">
        <div class="history-list">
          <item-title title="基本信息" />
          <cash-deposit-info :detail-data="rowData" />
        </div>
        <div class="history-list">
          <item-title title="操作记录" />
          <operation-view
            :id="rowData.id"
            mode="receive_money_split"
          />
        </div>
      </div>
    </template>
  </detail-drawer>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {crmStore} from '@CRM/store'
import area from '@/utils/area.js'

export default defineComponent({
  components: {
    dealCashDeposit: defineAsyncComponent(() =>
      import('../modules/dealCashDeposit.vue')
    ),
    cashDepositInfo: defineAsyncComponent(() =>
      import('../modules/cashDepositInfo.vue')
    ),
  },
  props: {
    isOperation: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var total = ref(0)
    var reactiveData = reactive({
      marginStatusOption:
        crmStore.getters['dictionary/getDictionary']['cash_deposit_status'] || [],
      cashDepositTypeOption:
        crmStore.getters['dictionary/getDictionary']['payee_type'] || [],
      agentTypeOption:
        crmStore.getters['dictionary/getDictionary']['agent_type'] || [],
      returnCustomerOption: [],
      returnCustomerLoading: false,
      citys: area,
      filterData: {
        receiveMoneySplitStatus: '',
        splitType: '',
        agentType: '',
        agentName: '',
        splitTypeFrom: '2',
        minAmount: undefined,
        maxAmount: undefined,
        page: 1,
        pageSize: 20,
      },
      listData: [],
      dealCashDepositRef: null,
      detailDrawer: null,
      rowData: null,
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作') return
      reactiveData.rowData = row
      reactiveData.detailDrawer.open()
    }
    const getList = (row) => {
      console.log('列表')
      api.internalControl
        .INTERNAL_CONTROL_FINANCE_SPLIT_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list
            total.value = res.data.total
          }
        })
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        receiveMoneySplitStatus: '',
        splitType: '',
        agentType: '',
        agentName: '',
        splitTypeFrom: '2',
        minAmount: undefined,
        maxAmount: undefined,
        page: 1,
        pageSize: 20,
      }
      getList()
    }
    // 处置保证金
    const dealCashDeposit = (row) => {
      reactiveData.dealCashDepositRef.open(row)
    }

    const returnCustomerQuerySearch = async(queryString, cb) => {
      reactiveData.returnCustomerLoading = true
      const a = {
        keyWord: queryString,
      }
      let results = []
      const res = await api.returnedAndReceivable.RETURNEDMONEY_CUSTOMER_LIST(a)
      if (res.code === 0) {
        reactiveData.returnCustomerLoading = false
        results = res.data.list || []
        reactiveData.returnCustomerOption = results
      }
    }

    // 更新列表
    const refreshList = () => {
      reactiveData.filterData.page = 1
      getList()
    }

    onMounted(() => {
      getList()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      refreshList,
      resetFilter,
      dealCashDeposit,
      returnCustomerQuerySearch,
    }
  },
})
</script>

